<template>
  <main>
    <HomeTibar />
    <section>
      <transition name="book-flip" mode="out-in">
        <router-view></router-view>
      </transition>
    </section>
  </main>
</template>

<script setup lang='ts' name="HomeMain">
import HomeTibar from '@/components/HomeTibar.vue';

</script>
<style scoped lang='scss'>
main {
  display: grid;
  grid-template-rows: 30px auto;
  height: 100%;
  width: 100%;
  overflow: hidden;
  section {
    height: 100%;
    width: 100%;
    overflow: auto;
    @include useTheme {
      background: getVar('mainBg');
    }
  }
}
/* 翻书动画 */
.book-flip-enter-active,
.book-flip-leave-active {
  transition: all 0.6s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.book-flip-enter-from {
  transform: rotateX(90deg);
  opacity: 0;
}

.book-flip-leave-to {
  transform: rotateX(-90deg);
  opacity: 0;
}

.book-flip-enter-to,
.book-flip-leave-from {
  transform: rotateX(0deg);
  opacity: 1;
}
</style>